<template>
  <div>
    <div class="ds">
      <div>
        <router-link to="/shouye">去首页</router-link>
        <img src="/qttp/1112.jpg" alt="">
        <router-link to="/recipelb">去广场</router-link>
      </div>
      <canvas
        id="cvs"
        width="1200"
        height="600"
      ></canvas>
    </div>
  </div>
</template>
<script></script>
<script></script>
<script>
export default {
  methods: {
    get1() {
      let ctx = cvs.getContext('2d');
      ctx.font = '50px 微软雅黑'
      ctx.fillStyle = "black"
      ctx.fillText('您访问的网页不存在！', 370, 200)
      ctx.font = 'bold 100px 微软雅黑';
      ctx.strokeStyle = 'black';
      ctx.lineWidth='5';
      //阴影
      // ctx.shadowColor='red';
      // ctx.shadowBlur='1';
      // ctx.shadowOffsetX='1';
      // ctx.shadowOffsetY='1';
      // ctx.strokeText('Not Found', 350, 130)
      ctx.fillText('Not Found', 330, 130)
    }
  },
  mounted(){
    this.get1()
  }
}
</script>

<style lang="scss" scoped>
.ds {
  >div{
    margin: 0 auto;
    text-align: center;
    img{
      border-radius: 50%;
      width: 200px;
      height: 200px;
      margin-top: 70px;
    }
    a{
      font-size: 22px;
      display: inline-block;
      border-radius: 15px;
      width: 100px;
      line-height: 40px;
      background-color: rgb(122, 118, 118);
      position: relative;
      margin: 0 15px;
      color: #000;
    }
    a:first-child{
      top: -85px;
      background-color: 	#95CACA;
    }
    a:last-child{
      top: -135px;
      background-color: #004B97;
    }
  }
  width: 1200px;
  height: 600px;
  margin: 0 auto;
}
</style>
